<!--
 * @docName: zyForm.vue
 * @Author: mwl
 * @Date: 18:38
 * @LastEditors: mwl
 * @LastEditTime: 18:38
-->
<template>
  <a-form-model ref="ruleForm" :model="model1" :rules="validatorRules" class="password-retrieval-form">
    <div class="input-info">
      <a-form-model-item prop="name" label="姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="model1.name" size="large" placeholder="您的姓名" />
      </a-form-model-item>
      <!--              <a-form-model-item prop="entName" label="企业名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                      <a-input v-model="model1.entName" size="large" placeholder="您的企业名称" />
                    </a-form-model-item>-->
      <a-form-model-item prop="phone" label="登录手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input v-model="model1.phone" size="large" placeholder="11 位手机号" />
      </a-form-model-item>
      <a-row>
        <a-form-model-item prop="captcha" label="验证码" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-col class="gutter-row" :span="14">
            <a-input v-model="model1.captcha" size="large" type="text" placeholder="验证码" autocomplete="off">
              <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-col>
          <a-col class="gutter-row" :span="9" :offset="1">
            <a-button
              class="getCaptcha"
              size="large"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="!state.smsSendBtn && '发送验证码'||(state.time+' s')"></a-button>
          </a-col>
        </a-form-model-item>
      </a-row>
      <a-form-model-item prop="remark" label="需求描述" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-textarea v-model="model1.remark" :auto-size="{ minRows: 4, maxRows: 6 }" placeholder='请简要描述您的需求（选填）' />
      </a-form-model-item>
    </div>
    <a-form>
      <a-form-item :wrapperCol="{span: 3, offset: 3}">
        <!--        <a-button @click="prevStep">上一步</a-button>-->
        <a-button
          type="primary"
          htmlType="submit"
          @click.stop.prevent="submitFun"
        >提 交</a-button>
      </a-form-item>
    </a-form>
  </a-form-model>
</template>

<script>
import { getAddClue, getCheckExists, getSendSmsCode,getCheckSmsCode } from '@api/register'
export default {
  name: 'zyForm',
  data(){
    return{
      loading: false,
      model1: {},
      activeKey:1,
      ssqKey:'',
      labelCol: { span:6},
      wrapperCol: { span: 18 },
      validatorRules: {
        name:[
          { required: true,message: '请输入您的姓名!' },
        ],
        entName:[
          { required: true,message: '请输入企业名称!' },
        ],
        phone: [
          { required: true,message: '请输入手机号!' },
          { validator: this.handlePhoneCheck }
        ],
        captcha: [
          { required: true ,message: '请输入验证码!'},
          { validator: this.handleCaptchaCheck }
        ]
      },
      state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
    }
  },
  methods:{
    submitFun(){
      let params = {};
      params = this.model1;
      params.fromFlag = ['自由职业者'];
      params.entName = this.model1.name;
      params.from = '勤税宝客户端';
      console.log(params)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          getAddClue(params).then((res) => {
            if(res.success){
              this.$message.success('申请信息已提交，我们将尽快跟您取得联系！');
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })


    },
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.$refs['ruleForm'].validateField(['phone'], (err) => {
          if (!err) {
            this.state.smsSendBtn = true;
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 60;
                that.state.smsSendBtn = false;
                window.clearInterval(interval);
              }
            }, 1000);
            const hide = this.$message.loading('验证码发送中..', 3);
            const params = {
              phone: this.model1.phone,
            };
            getSendSmsCode(params).then((res) => {
              if (!res.success) {
                this.$message.warning(res.message);
                setTimeout(hide, 0);
              }else{
                this.$message.success(res.result);
              }
              setTimeout(hide, 500);
            }).catch(err => {
              setTimeout(hide, 1);
              clearInterval(interval);
              that.state.time = 60;
              that.state.smsSendBtn = false;
              this.$message.warning(err);
            });
          }
        }
      );
    },
    handlePhoneCheck(rule, value, callback) {
      let reg = /^(1\d{10})$/;
      if(!reg.test(value)){
        callback(new Error("请输入正确手机号"))
      }else{
        var params = {
          phone: value,
        };
        getCheckExists(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
        callback()
      }
    },
    handleCaptchaCheck(rule, value, callback){
      if(!value){
        callback(new Error("请输入验证码"))
      }else{
        var params = {
          code: value,
          phone:this.model1.phone
        };
        getCheckSmsCode(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
      }
    },
  }
}
</script>

<style scoped>

</style>
